<template>
    <view class="course-detail">
        <!-- 课程封面 -->
        <view v-if="course.cover" class="cover-container">
            <image class="course-cover" :src="course.cover" mode="aspectFill" />
        </view>
        <view style="display:flex;justify-content:end"><button size="mini" @click="openEditPopup">修改课程信息</button></view>
        <!-- 课程基本信息 -->
        <uni-card class="course-info-card">
            <view class="status-wrapper">
                <view slot="title" class="course-name">{{ course.courseName }}</view>
                <view :class="['status-badge', getStatusClass(course.status)]">
                    {{ course.status }}
                </view>
            </view>
            <view class="meta-info">
                <view class="time-info">
                    <uni-icons type="calendar" size="18" color="#888" />
                    <text class="info-text">{{ course.startTime }} - {{ course.endTime }}</text>
                </view>
                <view class="teacher-info">
                    <uni-icons type="person" size="18" color="#888" />
                    <text class="info-text">授课教师: {{ course.teacherUsername }}</text>
                </view>
            </view>
        </uni-card>

        <!-- 分割线 -->
        <view class="divider"></view>

        <!-- 课程描述 -->
        <uni-card class="description-card">
            <view slot="title" class="section-title">课程描述</view>
            <text class="description-text">{{ course.description }}</text>
        </uni-card>

        <!-- 分割线 -->
        <view class="divider"></view>

        <!-- 学生列表 -->
        <uni-card class="student-list-card">
            <view slot="title" class="section-title">学生列表</view>
            <view v-for="student in course.students" :key="student" class="student-item">
                <uni-icons type="person" size="16" color="#888" />
                <text class="student-name">{{ student }}</text>
            </view>
        </uni-card>
        <!-- 修改课程信息弹窗 -->
        <EditCoursePopup ref="editPopup" :course="course" @refresh="refreshCourse" />
    </view>
</template>

<script>
import EditCoursePopup from '../components/editcourse.vue'; // 引入修改课程信息弹窗组件

export default {
    components: { EditCoursePopup },
    data() {
        return {
            course: {}
        };
    },
    onLoad(options) {
        // 解析传递过来的课程数据
        this.course = JSON.parse(options.course);
        console.log(this.course);
    },
    methods: {
        getStatusClass(status) {
            switch (status) {
                case 'active':
                    return 'status-active';
                case 'inactive':
                    return 'status-inactive';
                default:
                    return '';
            }
        },
        // 打开弹窗
        openEditPopup() {
            this.$refs.editPopup.openEditPopup(this.course);
        },
        // 刷新课程信息
        refreshCourse() {
            // 重新获取课程信息，这里可以根据实际情况修改
            this.course = JSON.parse(JSON.stringify(this.$refs.editPopup.editForm));
        }
    }
};
</script>

<style scoped>
.course-detail {
    padding: 15px;
}

.cover-container {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.course-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.course-info-card {
    margin-bottom: 15px;
}

.course-name {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.status-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-active {
    background-color: #28a745;
    color: #fff;
}

.status-inactive {
    background-color: #dc3545;
    color: #fff;
}

.meta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-info,
.teacher-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-text {
    font-size: 14px;
    color: #666;
}

.divider {
    height: 1px;
    background-color: #eee;
    margin: 15px 0;
}

.description-card,
.student-list-card {
    margin-bottom: 15px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.description-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.student-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.student-name {
    font-size: 14px;
    color: #666;
}
</style>